<template>
  <div class="home-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="main-title">《永恒的高迪·圣家堂》</h1>
        <p class="subtitle">VR大空间展览体验</p>
        <div class="header-decoration">
          <div class="decoration-line"></div>
          <span class="decoration-text">华南师范大学美术学院</span>
          <div class="decoration-line"></div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="departments">
        <div class="department-card" v-for="department in departments" :key="department.id">
          <!-- 卡片背景 -->
          <div class="card-background">
            <div class="background-overlay"></div>
          </div>
          
          <!-- 卡片内容 -->
          <div class="card-content">
            <div class="card-header">
              <h2 class="department-name">{{ department.name }}</h2>
              <div class="institution-info">
                <span class="institution-text">{{ department.description }}</span>
              </div>
            </div>
            
            <div class="qr-section">
              <div class="qr-container">
                <div class="qr-frame">
                  <img :src="department.qrcodeUrl" alt="扫码预约" class="qrcode-image">
                </div>
                <div class="qr-label">
                  <span class="qr-text">扫码预约</span>
                  <span class="qr-hint">或点击下方按钮</span>
                </div>
              </div>
            </div>
            
            <div class="card-footer">
              <el-button 
                type="primary" 
                size="large"
                @click="goToDepartment()"
                class="enter-button"
              >
                <span class="button-icon">🎫</span>
                立即预约体验
              </el-button>
              <div class="footer-hint">
                <span class="hint-text">免费体验 · 先到先得</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      

    </div>

    <!-- 加载组件 -->
    <LoadingSpinner 
      :visible="isLoading" 
      :title="loadingTitle" 
      :message="loadingMessage" 
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import QRCode from 'qrcode'
import LoadingSpinner from '../components/LoadingSpinner.vue'

const router = useRouter()

// 加载状态
const isLoading = ref(false)
const loadingTitle = ref('加载中')
const loadingMessage = ref('请稍候，正在为您准备精彩内容...')

// 显示加载
const showLoading = (title = '加载中', message = '请稍候，正在为您准备精彩内容...') => {
  loadingTitle.value = title
  loadingMessage.value = message
  isLoading.value = true
}

// 隐藏加载
const hideLoading = () => {
  isLoading.value = false
}

// 部门数据
const departments = ref([
  {
    id: 'medical',
    name: '预约入口',
    url: 'http://8.134.239.0:5176/',
    description: '华南师范大学（石牌校区）美术学院',
    qrcodeUrl: ''
  }
])

// 生成二维码
const generateQRCodes = async () => {
  showLoading('页面初始化', '正在生成预约二维码...')
  
  try {
    for (const department of departments.value) {
      department.qrcodeUrl = await QRCode.toDataURL(department.url, {
        width: 200,
        margin: 2,
        color: {
          dark: '#333333',
          light: '#FFFFFF'
        }
      })
    }
    
    // 模拟一些加载时间以显示效果
    await new Promise(resolve => setTimeout(resolve, 1000))
    
  } catch (error) {
    console.error('生成二维码失败:', error)
  } finally {
    hideLoading()
  }
}

// 跳转到预约系统
const goToDepartment = () => {
  showLoading('正在跳转', '即将进入预约系统...')
  
  // 添加一些延迟让用户看到加载效果
  setTimeout(() => {
    router.push('/booking-system')
    // 路由跳转后会自动隐藏loading，因为组件会被销毁
  }, 800)
}

onMounted(() => {
  generateQRCodes()
})
</script>

<style scoped>
@import '../assets/css/homepage.css';
</style>